<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<script language="javascript" type="text/javascript">
var current="";
var request;
</script>
<script language="javascript" src="js/ajax.js"></script>
<script language="javascript" type="text/javascript">
function hover(target)
{
	document.getElementById(target).src="images/"+target+"hover.png";
}
function out(target)
{
	if (!(target==current))
	{
		document.getElementById(target).src="images/"+target+".png";
	}
}
function selec(target)
{
	if(current!="")
		document.getElementById(current).src="images/"+current+".png";
	current=target;
	document.getElementById(current).src="images/"+current+"hover.png";
	//document.getElementById("content").innerHTML=current;
	createRequest();
	request.open("GET",target+".htm",true);
	request.onreadystatechange = updatePage;
	request.send(null);
}
function search()
{
	var keyword=document.getElementById("keyword").value;
	createRequest();
	request.open("GET","detailsearch.htm?keyword="+keyword+"",true);
	request.onreadystatechange = updatePage;
	request.send(null);
}
function updatePage(){
if(request.readyState == 4 ){
   document.getElementById('content').innerHTML = request.responseText;}
}
</script>
<body style="width:700px; height:506px; text-align:center; margin: 0,0,0,0;" onload="javacript:selec('latestphotoshots');">
<table style="margin-left:auto; margin-right:auto" align="center">
<tr><td>
<table style="width:150px; height:500px;">
<tr><td style="height:40px; text-align:center; vertical-align:middle;">
<img id="latestphotoshots" src="images/latestphotoshots.png"
onclick="javacript:selec('latestphotoshots');" onmouseover="javacript:hover('latestphotoshots');" onmouseout="javacript:out('latestphotoshots');"
 style="vertical-align:bottom; border:none; margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto;" /></td></tr>
<tr><td style="height:40px; text-align:center; vertical-align:middle;">
<a href="#" onclick="javacript:selec('allphotoshots');" onmouseover="javacript:hover('allphotoshots');" onmouseout="javacript:out('allphotoshots');">
<img id="allphotoshots" src="images/allphotoshots.png" 
 style="vertical-align:bottom; border:none; margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto;" /></a></td></tr>
<tr><td style="height:40px; text-align:center; vertical-align:middle;">
<a href="#" onclick="javacript:selec('mostviews');" onmouseover="javacript:hover('mostviews');" onmouseout="javacript:out('mostviews');">
<img id="mostviews" src="images/mostviews.png" 
 style="vertical-align:bottom; border:none; margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto;" /></a></td></tr>
<tr><td style="height:40px; text-align:center; vertical-align:middle;">
<img id="mostvotes" src="images/mostvotes.png" 
onclick="javacript:selec('mostvotes');" onmouseover="javacript:hover('mostvotes');" onmouseout="javacript:out('mostvotes');"
 style="vertical-align:bottom; border:none; margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto;" /></td></tr>
<tr><td style="height:40px; text-align:center; vertical-align:middle;">
<img id="mostcomments" src="images/mostcomments.png" 
onclick="javacript:selec('mostcomments');" onmouseover="javacript:hover('mostcomments');" onmouseout="javacript:out('mostcomments');"
 style="vertical-align:bottom; border:none; margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto;" /></td></tr>
<tr><td style="vertical-align:bottom; text-align:right; height:300px; font-family:Arial, Helvetica, sans-serif; font-size:10px">
<form action="detailsearch.htm" method="post" style="margin-bottom:0px;">by Keywords
<input id="keyword" name="keyword" type="text" style="width:70px; font-family:Arial, Helvetica, sans-serif; font-size:10px" /><br />
<input type="button" onclick="javascript:search();" value="search" style="font:Arial, Helvetica, sans-serif; font-size:10px;" /></form></td></tr>
</table>
</td><td style="vertical-align:top"><div id="content" style="width:550px; height:506px; overflow:auto; overflow-x:hidden"></div></td></tr>
</table>
</body>
</html>
